// 头部导航位置
var curPageIdx = 2;
// 热门赛事
var matchAlbumJson = [
   {'id':'10001', 'title': '牡丹亭', 'img': '../image/match/album.png'},
   {'id':'10002', 'title': '牡丹亭', 'img': '../image/match/album.png'},
   {'id':'10003', 'title': '牡丹亭' ,'img': '../image/match/album.png'},
   {'id':'10004', 'title': '2018KPL春季赛', 'img': '../image/match/album.png'},
   {'id':'10005', 'title': 'LPL职业联赛', 'img': '../image/match/album.png'},
   {'id':'10006', 'title': 'LPL6职业联赛', 'img': '../image/match/album.png'}
];

// 热播排行榜
var hotListJson = [
    {'id': '10004', 'title': '2018KPL春季赛 常规赛'},
    {'id': '10007', 'title': '绝地求生SLi联赛'},
    {'id': '10008', 'title': 'CFPL S10双端总决赛'},
    {'id': '10009', 'title': 'LPL英雄联盟职业联赛'},
    {'id': '10010', 'title': 'TGA移动游戏大奖赛'}
];

// 推荐视频
var videoListJson = [
    {'id': '10004','bg': '../image/match/video1.png', 'title': '【破冰英雄】盘点 第12期：哪些英雄有真是伤害'},
    {'id': '10005','bg': '../image/match/video2.png', 'title': '【鱼嘴滑舌】第89期：无畏战车狂铁，极限反击以一敌五'},
    {'id': '10006','bg': '../image/match/video3.png', 'title': '【破冰英雄】盘点 第12期：哪些英雄有真是伤害伤害shanghai'},
    {'id': '10007','bg': '../image/match/video1.png', 'title': '【破冰英雄】盘点 第12期：哪些英雄有真是伤害'},
    {'id': '10008','bg': '../image/match/video2.png', 'title': '【鱼嘴滑舌】第88期：无畏战车狂铁，极限反击以一敌五'},
    {'id': '10009','bg': '../image/match/video2.png', 'title': 'TGA移动游戏大奖赛'},
    {'id': '10010','bg': '../image/match/video1.png', 'title': '【破冰英雄】盘点 第12期：哪些英雄有真是伤害'},
    {'id': '10011','bg': '../image/match/video2.png', 'title': '【鱼嘴滑舌】第89期：无畏战车狂铁，极限反击以一敌五'}
];

//tag标签
var tagListJson = [
    {'id': '1', 'title': '推荐'},
    {'id': '2', 'title': '京剧'},
    {'id': '3', 'title': '豫剧'},
    {'id': '4', 'title': '曲剧'},
    {'id': '5', 'title': '越剧'},
    {'id': '6', 'title': '评剧'},
    {'id': '7', 'title': '梆子'},
    {'id': '8', 'title': '折子戏'},
    {'id': '9', 'title': '晋剧'},
    {'id': '10', 'title': '黄梅戏'}
];

// 当前选中swipersilder的index值
var curSwiperIndex = 0;
// silder总数
var totalCount;
// swiper移动的margin-left大小
var scrollLeft = 0;
window.onload=function(){
    // header跳转的页面
    var headerUrls = ['../index/index.html','../arena/arena.html','../famous_part/famous-part.html','../class/classDetail.html','../my/Record.html'];
    // 工具栏按钮跳转页
    var funcDivUrl = ['../search/Search.html','../history/CollectItem.html','../history/Record.html'];
    // 计算页面比例
    var wW = document.body.clientWidth || document.documentElement.clientWidth; 
    var ratio = wW / 1920;

    var funcDiv= document.getElementsByClassName("funcDiv")[0];
    var header = document.getElementById("header");
    var albums = document.getElementById("albums");
    var hot = document.getElementById("hot-content");
//  var swiperWrapper = document.getElementById("swiper-wrapper");
    var tagContainer = document.getElementById("tagContainer");

    // 加载页面默认第一个选中元素
    var lis = header.getElementsByTagName('li');
    var actiLiElem = lis[2];
    addClass(actiLiElem,'focus');

    loadData();
   /* var slideLength = document.getElementsByClassName('swiper-slide').length;
    var slideWidth = document.getElementsByClassName('swiper-slide')[1].offsetWidth;
    // 计算swiperWrapper宽
    document.getElementById('swiper-wrapper').style.width = (slideWidth * slideLength + slideLength*38*ratio) + 'px';

    */
    function loadData(){
        totalCount = videoListJson.length;
        /*上方专辑*/
        var albumInner = '';
        for(var i = 0; i < 6; i++){
            albumInner += '<div ican="true" href="./famous_play.html" entity_id='+matchAlbumJson[i]["id"]+' id="albumItem'+ i +'" class="album-item" style="background-image:url('+ matchAlbumJson[i]['img'] +')"><div class="cover">'+matchAlbumJson[i]["title"]+'</div></div>';
        }
        document.getElementById('albums').innerHTML = albumInner;
        /*热播排行榜*/
        var hotContentInner = '';
        for(var i = 0; i < 5; i++){
            if ((i + 1) % 2 == 0) {
                hotContentInner += '<div href="./part_play.html" ican="true" entity_id='+hotListJson[i]["id"]+' id="hotItem'+ i +'" class="hot-item item-even"><div class="number">'+ (i+1) +'</div><div class="text">'+ hotListJson[i]['title'] +'</div></div>';
            }else{
                hotContentInner += '<div href="./part_play.html" ican="true" entity_id='+hotListJson[i]["id"]+' id="hotItem'+ i +'" class="hot-item item-odd"><div class="number">'+ (i+1)  +'</div><div class="text">'+ hotListJson[i]['title'] +'</div></div>';
            }
        }
        document.getElementById('hot-content').innerHTML = hotContentInner;
        
        /*推荐视频列表*/
        /*var recommendVideoInner = '';
        for(var i = 0; i < videoListJson.length; i++){
            if(i!=0 && i%4 == 3){
                recommendVideoInner += '<div entity_id='+videoListJson[i]["id"]+' id="swiperSlide'+ i +'" class="swiper-slide newMR"><div class="video-item" style="background-image:url('+ videoListJson[i]['bg'] +')"><div class="cover"><span class="align_word">'+videoListJson[i]['title']+'</span></div></div></div>';
            }else if(i%4 == 0){
                recommendVideoInner += '<div entity_id='+videoListJson[i]["id"]+' id="swiperSlide'+ i +'" class="swiper-slide clearML"><div class="video-item" style="background-image:url('+ videoListJson[i]['bg'] +')"><div class="cover"><span class="align_word">'+videoListJson[i]['title']+'</span></div></div></div>';
            }else{
                recommendVideoInner += '<div entity_id='+videoListJson[i]["id"]+' id="swiperSlide'+ i +'" class="swiper-slide"><div class="video-item" style="background-image:url('+ videoListJson[i]['bg'] +')"><div class="cover"><span class="align_word">'+videoListJson[i]['title']+'</span></div></div></div>';
            }
        }
        document.getElementById('swiper-wrapper').innerHTML = recommendVideoInner;*/
        /*下方tag标签内容*/
        var tagInner = '';
        for(var i = 0; i < 10; i++){
            tagInner += '<div ican="true" entity_id='+tagListJson[i]["id"]+' id="tagItem'+ i +'" class="tag-item">'+ tagListJson[i]['title']+'</div>';
        }
        document.getElementById('tagContainer').innerHTML = tagInner;
    }
    

    // 获取焦点元素
    function getActiveElement(){
        var rel = document.querySelector(".focus")
        return rel;
    }

    // 父元素是否包含子元素
    var contains = function(parentNode, childNode) {
        if (parentNode.contains) {
            return parentNode != childNode && parentNode.contains(childNode);
        } else {
            return !!(parentNode.compareDocumentPosition(childNode) & 16);
        }
    }

        // 移动swiper位置
    function scrollSwiper(direction){
        switch(direction){
            case 'l':
                if(curSwiperIndex <= 1){
                    curSwiperIndex = 0;
                    document.getElementById("arrow-right").style.opacity = 0.5;
                    document.getElementById("arrow-left").style.opacity = 0;
                    return;
                }
                document.getElementById("arrow-right").style.opacity = 0.5;
                document.getElementById("arrow-left").style.opacity = 0.5; 
                if(curSwiperIndex%4 == 0){
                    scrollLeft -= - (1768*ratio);
                    document.getElementById('swiper-wrapper').style.marginLeft = scrollLeft + 'px';
                    
                }
                curSwiperIndex--;
                break;  
            case 'r':
                if(curSwiperIndex == totalCount-1) return;
                curSwiperIndex++;
                if(curSwiperIndex == totalCount-1){
                    document.getElementById("arrow-right").style.opacity = 0;
                    document.getElementById("arrow-left").style.opacity = 0.5;
                }else{
                    document.getElementById("arrow-right").style.opacity = 0.5;
                    document.getElementById("arrow-left").style.opacity = 0.5;
                }
                if(curSwiperIndex%4 != 0) return;
                scrollLeft += - (1768*ratio);
                document.getElementById('swiper-wrapper').style.marginLeft = scrollLeft + 'px';
                break;      
        }
    }

    function resetSwiper(){
        curSwiperIndex = 0;
        scrollLeft = 0;
        document.getElementById('swiper-wrapper').style.marginLeft = scrollLeft +'px';
        document.getElementById("arrow-right").style.opacity = 0.5;
        document.getElementById("arrow-left").style.opacity = 0;
    }

    // 赛事页面控制焦点
    function setFocusEl(direction, containerEl, curActiveElem){
        var nextEl = containerEl;
        switch(containerEl){
            case funcDiv:
                switch(direction){
                    case 'l':
                        if(curActiveElem.previousElementSibling == null) return;
                        removeClass(curActiveElem, 'focus');
                        removeClass(curActiveElem, 'search-acti');
                        removeClass(curActiveElem, 'favorite-acti');
                        removeClass(curActiveElem, 'history-acti');
                        curActiveElem = curActiveElem.previousElementSibling;
                        
                        switch(curActiveElem.index()){
                            case 0:
                                addClass(curActiveElem, 'search-acti');
                                break;
                            case 1:
                                addClass(curActiveElem, 'favorite-acti');   
                                break;
                        }   
                        addClass(curActiveElem, 'focus');
                        break;
                    case 'r':
                        if(curActiveElem.nextElementSibling == null) return;
                        removeClass(curActiveElem, 'focus');
                        removeClass(curActiveElem, 'search-acti');
                        removeClass(curActiveElem, 'favorite-acti');
                        removeClass(curActiveElem, 'history-acti');
                        curActiveElem = curActiveElem.nextElementSibling;
                        switch(curActiveElem.index()){
                            case 1:
                                addClass(curActiveElem, 'favorite-acti');   
                                break;
                            case 2:
                                addClass(curActiveElem, 'history-acti');    
                                break;
                        }   
                        addClass(curActiveElem, 'focus');
                        break;
                    case 'u':
                        return;
                        break;
                    case 'd':
                        removeClass(curActiveElem, 'focus');
                        removeClass(curActiveElem, 'search-acti');
                        removeClass(curActiveElem, 'favorite-acti');
                        removeClass(curActiveElem, 'history-acti');
                        addClass(actiLiElem, 'focus');
                        addClass(actiLiElem, 'header_only_foucused_li');
                        break;          
                }
                break;
            case header:
                switch(direction){
                    case 'l':
                        if(curActiveElem.previousElementSibling == null) return;
                        removeClass(curActiveElem, 'focus');
                        curActiveElem = curActiveElem.previousElementSibling;
                        addClass(curActiveElem, 'header_selected_li');
                        addClass(curActiveElem, 'header_only_foucused_li');
                        addClass(curActiveElem, 'focus');
                        removeClass(curActiveElem.nextElementSibling, 'header_selected_li');
                        removeClass(curActiveElem.nextElementSibling, 'header_only_foucused_li');
                        var curLiIdx = parseInt(curActiveElem.id.replace('header_li_',''));
                        // 跳转到其他页面
                        window.location.href = headerUrls[curLiIdx - 1];
                        break;
                    case 'r':
                        if(curActiveElem.nextElementSibling == null) return;
                        removeClass(curActiveElem, 'focus');
                        curActiveElem = curActiveElem.nextElementSibling;
                        addClass(curActiveElem, 'header_selected_li');
                        addClass(curActiveElem, 'header_only_foucused_li');
                        addClass(curActiveElem, 'focus');
                        removeClass(curActiveElem.previousElementSibling, 'header_selected_li');
                        removeClass(curActiveElem.previousElementSibling, 'header_only_foucused_li');
                        var curLiIdx = parseInt(curActiveElem.id.replace('header_li_',''));
                        // 跳转到其他页面
                        window.location.href = headerUrls[curLiIdx - 1];
                        break;
                    case 'u':
                        removeClass(curActiveElem, 'focus');
                        // 赛事为高亮状态
                        removeClass(curActiveElem, 'header_only_foucused_li');
                        removeClass(curActiveElem, 'header_selected_li');
                        addClass(actiLiElem,'header_selected_li');
                        addClass(funcDiv.children[0], 'search-acti');//焦点跳到搜索
                        addClass(funcDiv.children[0], 'focus')
                        break;
                    case 'd':
                        nextEl = albums;
                        removeClass(curActiveElem, 'focus');
                        removeClass(curActiveElem, 'header_only_foucused_li');
                        removeClass(curActiveElem, 'header_selected_li');
                        addClass(actiLiElem,'header_selected_li');
                        // 设置专辑第一个元素为焦点
                        curActiveElem = nextEl.firstElementChild;
                        addClass(curActiveElem, 'albumItem-acti');
                        addClass(curActiveElem, 'focus');
                        addClass(curActiveElem.parentNode, 'album-acti');
                        break;          
                }
                break;
            case albums:
                switch(direction){
                    case 'l':
                        if(curActiveElem.previousElementSibling == null) return;
                        removeClass(curActiveElem, 'focus');
                        removeClass(curActiveElem, 'albumItem-acti');
                        curActiveElem = curActiveElem.previousElementSibling;
                        addClass(curActiveElem, 'albumItem-acti');
                        addClass(curActiveElem, 'focus');
                        break;
                    case 'r':
                        removeClass(curActiveElem, 'focus');
                        if(curActiveElem == curActiveElem.parentNode.lastElementChild){//跳到热播榜
                            nextEl = hot;
                            // 先移除样式
                            removeClass(curActiveElem, 'albumItem-acti');
                            removeClass(curActiveElem.parentNode, 'album-acti');
                            // 设置新的元素
                            curActiveElem = nextEl.firstElementChild;
                            addClass(curActiveElem, 'item-active');
                        }else{
                            removeClass(curActiveElem, 'albumItem-acti');
                            curActiveElem = curActiveElem.nextElementSibling;
                            addClass(curActiveElem, 'albumItem-acti');
                            
                        }
                        addClass(curActiveElem, 'focus');
                        break;
                    case 'u':
                        nextEl = header;
                        removeClass(curActiveElem, 'focus');
                        removeClass(curActiveElem, 'albumItem-acti');
                        removeClass(curActiveElem.parentNode, 'album-acti');

                        // 赛事为选中
                        addClass(actiLiElem,'focus');
                        addClass(actiLiElem,'header_only_foucused_li');
                        break;
                    case 'd':
                        nextEl = swiperWrapper;
                        removeClass(curActiveElem, 'focus');
                        removeClass(curActiveElem, 'albumItem-acti');
                        removeClass(curActiveElem.parentNode, 'album-acti');
                        curActiveElem = nextEl.firstElementChild;
                        addClass(curActiveElem, 'focus');
                        addClass(curActiveElem, 'swiper-slide-active');
                        break;          
                }
                break;
            case hot:
                switch(direction){
                    case 'l':
                        nextEl = albums;
                        // 跳到专辑
                        // 先移除样式
                        removeClass(curActiveElem, 'focus');
                        removeClass(curActiveElem, 'item-active');
                        // 设置新的元素
                        curActiveElem = nextEl.firstElementChild;
                        addClass(curActiveElem, 'focus');
                        addClass(curActiveElem, 'albumItem-acti');
                        addClass(curActiveElem.parentNode, 'album-acti');
                        break;
                    case 'r':
                        return;
                        break;
                    case 'u':
                        removeClass(curActiveElem, 'focus');
                        if(curActiveElem == curActiveElem.parentNode.firstElementChild){//跳到header
                            nextEl = header;
                            removeClass(curActiveElem, 'item-active');
                            // 赛事为选中
                            addClass(actiLiElem,'focus');
                            addClass(actiLiElem,'header_only_foucused_li');
                        }else{
                            removeClass(curActiveElem, 'item-active');
                            curActiveElem = curActiveElem.previousElementSibling;
                            addClass(curActiveElem, 'focus');
                            addClass(curActiveElem, 'item-active');
                        }
                        break;
                    case 'd':
                        removeClass(curActiveElem, 'focus');
                        if(curActiveElem == curActiveElem.parentNode.lastElementChild){//跳到推荐视频
                            nextEl = swiperWrapper;
                            removeClass(curActiveElem, 'item-active');
                            curActiveElem = nextEl.firstElementChild;
                            addClass(curActiveElem, 'swiper-slide-active');
                        }else{
                            removeClass(curActiveElem, 'item-active');
                            curActiveElem = curActiveElem.nextElementSibling;
                            addClass(curActiveElem, 'item-active');
                        }
                        addClass(curActiveElem, 'focus');
                        break;          
                }
                break;
           /* case swiperWrapper:
                switch(direction){
                    case 'l':
                        if(curActiveElem.previousElementSibling == null) return;
                        removeClass(curActiveElem, 'focus');
                        removeClass(curActiveElem, 'swiper-slide-active');
                        curActiveElem = curActiveElem.previousElementSibling;
                        addClass(curActiveElem, 'focus');
                        addClass(curActiveElem, 'swiper-slide-active');
                        break;
                    case 'r':
                        if(curActiveElem.nextElementSibling == null) return;
                        removeClass(curActiveElem, 'focus');
                        removeClass(curActiveElem, 'swiper-slide-active');
                        curActiveElem = curActiveElem.nextElementSibling;
                        addClass(curActiveElem, 'focus');
                        addClass(curActiveElem, 'swiper-slide-active');
                        break;
                    case 'u':
                        nextEl = albums;
                        removeClass(curActiveElem, 'focus');
                        removeClass(curActiveElem, 'swiper-slide-active');
                        curActiveElem = nextEl.firstElementChild;
                        addClass(curActiveElem, 'focus');
                        addClass(curActiveElem, 'albumItem-acti');
                        addClass(curActiveElem.parentNode, 'album-acti');
                        // swiper回原位
                        resetSwiper();
                        break;
                    case 'd':
                        nextEl = tagContainer;
                        removeClass(curActiveElem, 'focus');
                        removeClass(curActiveElem, 'swiper-slide-active');
                        curActiveElem = nextEl.firstElementChild;
                        addClass(curActiveElem, 'focus');
                        addClass(curActiveElem, 'tagItem-acti');
                        addClass(curActiveElem.parentNode, 'tagCont-acti');
                        // swiper回原位
                        resetSwiper();
                        break;          
                }
                break;*/
            case tagContainer:
                switch(direction){
                    case 'l':
                        if(curActiveElem.previousElementSibling == null) return;
                        removeClass(curActiveElem, 'focus');
                        removeClass(curActiveElem, 'tagItem-acti');
                        curActiveElem = curActiveElem.previousElementSibling;
                        addClass(curActiveElem, 'focus');
                        addClass(curActiveElem, 'tagItem-acti');
                        break;
                    case 'r':
                        if(curActiveElem.nextElementSibling == null) return;
                        removeClass(curActiveElem, 'focus');
                        removeClass(curActiveElem, 'tagItem-acti');
                        curActiveElem = curActiveElem.nextElementSibling;
                        addClass(curActiveElem, 'focus');
                        addClass(curActiveElem, 'tagItem-acti');
                        break;
                    case 'u':
                        nextEl = swiperWrapper;
                        removeClass(curActiveElem, 'focus');
                        removeClass(curActiveElem, 'tagItem-acti');
                        curActiveElem = nextEl.firstElementChild;
                        addClass(curActiveElem, 'focus');
                        addClass(curActiveElem, 'swiper-slide-active');
                        break;
                    case 'd':
                        return;
                        break;          
                }
                break;        
        }
    }

    // document.onkeydown = remoteControl;
    function remoteControl(){
        e=window.event||e;
        switch(e.which){
            case 27: // ESC
                window.history.back();
                return false;
                break; 
            case 37: //左键
                var curActiveElem = getActiveElement();
                if(contains(funcDiv, curActiveElem)){
                    setFocusEl('l', funcDiv, curActiveElem);
                }else if(contains(header,curActiveElem)){
                    setFocusEl('l', header, curActiveElem);
                }else if(contains(albums,curActiveElem)){
                    setFocusEl('l', albums, curActiveElem);
                }else if(contains(hot,curActiveElem)){
                    // 热播榜-特殊
                    setFocusEl('l', hot, curActiveElem);
                }/*else if(contains(swiperWrapper,curActiveElem)){
                    setFocusEl('l', swiperWrapper, curActiveElem);
                    // 移动swiper
                    scrollSwiper('l');
                    
                }*/else{
                    setFocusEl('l', tagContainer, curActiveElem);
                }
                break;
            case 38: //上键
                var curActiveElem = getActiveElement();
                if(contains(funcDiv, curActiveElem)){
                    setFocusEl('u', funcDiv, curActiveElem);
                }else if(contains(header,curActiveElem)){
                    setFocusEl('u', header, curActiveElem);
                }else if(contains(albums,curActiveElem)){
                    setFocusEl('u', albums, curActiveElem);
                }else if(contains(hot,curActiveElem)){
                    // 热播榜-特殊
                    setFocusEl('u', hot, curActiveElem);
                }else if(contains(swiperWrapper,curActiveElem)){
                    setFocusEl('u', swiperWrapper, curActiveElem);
                }else{
                    setFocusEl('u', tagContainer, curActiveElem);
                }

                break;
            case 39: //右键
                var curActiveElem = getActiveElement();

                if(contains(funcDiv, curActiveElem)){
                    setFocusEl('r', funcDiv, curActiveElem);
                }else if(contains(header,curActiveElem)){
                    setFocusEl('r', header, curActiveElem);
                }else if(contains(albums,curActiveElem)){
                    setFocusEl('r', albums, curActiveElem);
                }else if(contains(hot,curActiveElem)){
                    // 热播榜-特殊
                    setFocusEl('r', hot, curActiveElem);
                }else if(contains(swiperWrapper,curActiveElem)){
                    setFocusEl('r', swiperWrapper, curActiveElem);
                    // 移动swiper
                    scrollSwiper('r');
                }else{
                    setFocusEl('r', tagContainer, curActiveElem);
                }
                break;
            case 40: //下键
                var curActiveElem = getActiveElement();
                if(contains(funcDiv, curActiveElem)){
                    setFocusEl('d', funcDiv, curActiveElem);
                }else if(contains(header,curActiveElem)){
                    setFocusEl('d', header, curActiveElem);
                }else if(contains(albums,curActiveElem)){
                    setFocusEl('d', albums, curActiveElem);
                }else if(contains(hot,curActiveElem)){
                    // 热播榜-特殊
                    setFocusEl('d', hot, curActiveElem);
                }else if(contains(swiperWrapper,curActiveElem)){
                    setFocusEl('d', swiperWrapper, curActiveElem);
                }else{
                    setFocusEl('d', tagContainer, curActiveElem);
                }
                break;
            case 13: //回车键
                var curActiveElem = getActiveElement();
                if(contains(funcDiv, curActiveElem)){
                    switch(curActiveElem.index()){
                        case 0:
                            // 跳转到搜索页
                            window.location.href = funcDivUrl[0];
                            break;
                        case 1:
                            // 跳转到搜藏
                            window.location.href = funcDivUrl[1];
                            break;
                        case 2:
                            // 跳转到历史
                            window.location.href = funcDivUrl[2];
                            break;      
                    }
                }else if(contains(header,curActiveElem)){
                    return;
                }else if(contains(albums,curActiveElem)){
                    // 跳转到赛事专辑页
                    window.location.href="album_play.html?rl_entity_id="+curActiveElem.getAttribute("entity_id");  
                }else if(contains(hot,curActiveElem)){
                    // 跳转到赛事专辑页
                    window.location.href="album_play.html?rl_entity_id="+curActiveElem.getAttribute("entity_id"); 
                }else if(contains(swiperWrapper,curActiveElem)){
                    // 跳转至播放页
                    return;
                }else{
                    var curIdx = parseInt(curActiveElem.id.replace('tagItem',''));
                    // 跳转至专区热门赛事
                    window.location.href="../special/specialDetail.html?curMatchId="+2+"&isHot="+1+"&focusLiIdx=3"; 
                }
                break;          
        }
    }
    
}